<template>
  <div class="app-container">
    <div class="content">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
        :rules="formRules"
      >
        <el-form-item label="追溯码:" prop="code">
          <el-input
            v-model="queryParams.code"
            placeholder="请输入追溯码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div class="title">药品基本信息</div>

      <el-table :data="tableData" border style="width: 100%">
        <!-- <el-table-column fixed prop="date" label="日期"> </el-table-column> -->
        <el-table-column prop="physic_name" label="药品通用名">
        </el-table-column>
        <el-table-column prop="prepn_type" label="剂型"> </el-table-column>
        <el-table-column prop="prepn_spec" label="制剂规格"> </el-table-column>
        <el-table-column prop="pkg_spec" label="包装规格"> </el-table-column>
        <el-table-column prop="pkg_ratio" label="包装比例"> </el-table-column>
        <el-table-column prop="produce_batch_no" label="产品批号">
        </el-table-column>
        <el-table-column
          prop="produce_date,exprie_date"
          label="生产日期/有效期至"
        >
          <template slot-scope="scope">
            <div>
              <span>生产日期：</span><span>{{ scope.row.produce_date }}</span>
            </div>
            <div>
              <span>有效期至：</span><span>{{ scope.row.exprie_date }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleRowcopy(scope.row)"
              type="text"
              size="small"
              >复制整行</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="traceableContent">
        <div class="info">
          <span
            >追溯码所在完整包装的关联关系信息(点击追溯码可以查看下级信息)</span
          >
        </div>
        <div class="traceableCode">
          <div class="firstCode">
            <div class="firstCodeBox">
              <div
                class="firstCodeItem"
                v-for="(item, index) in fatherData"
                :key="index"
                @click="handlefatherNode(item)"
                :style="{
                  backgroundColor: item.clicked ? '#409eff' : '',
                  color: item.clicked ? '#fff' : '',
                }"
              >
                {{ item.value }}
                <span
                  class="copyBox"
                  :style="{ color: item.clicked ? '#fff' : '' }"
                  @click="handleCopy(item.value)"
                  >复制</span
                >
              </div>
            </div>
            <div class="codeNum">共{{ fatherData.length }}个追溯码</div>
          </div>
          <div class="secondCode">
            <div class="secondCodeBox">
              <div
                class="secondCodeItem"
                v-for="(item, index) in sonData"
                :key="index"
                @click="handlesonNode(item)"
                :style="{
                  backgroundColor: item.clicked ? '#409eff' : '',
                  color: item.clicked ? '#fff' : '',
                }"
              >
                {{ item.value }}
                <span
                  class="copyBox"
                  :style="{ color: item.clicked ? '#fff' : '' }"
                  @click="handleCopy(item.value)"
                  >复制</span
                >
              </div>
            </div>
            <div class="codeNum">共{{ sonData.length }}个追溯码</div>
          </div>
          <div class="thirdCode">
            <div class="thirdCodeBox">
              <div
                class="thirdCodeItem"
                v-for="(item, index) in grandsonData"
                :key="index"
                @click="handlegrandsonNode(item)"
                :style="{
                  backgroundColor: item.clicked ? '#409eff' : '',
                  color: item.clicked ? '#fff' : '',
                }"
              >
                {{ item.value }}
                <span
                  class="copyBox"
                  :style="{ color: item.clicked ? '#fff' : '' }"
                  @click="handleCopy(item.value)"
                  >复制</span
                >
              </div>
            </div>
            <div class="codeNum">共{{ grandsonData.length }}个追溯码</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listBatchNo } from "@/api/supervision/electroCode";
export default {
  data() {
    return {
      dataCode: [
        // {
        //   id: 1,
        //   label: "86478330000013301236",
        //   children: [
        //     {
        //       id: 4,
        //       label: "86478340000186454894",
        //       children: [
        //         {
        //           id: 9,
        //           label: "84343720000219634893",
        //         },
        //         {
        //           id: 10,
        //           label: "84343720000219093538",
        //         },
        //       ],
        //     },
        //     {
        //       id: 5,
        //       label: "86478340000128156364",
        //       children: [
        //         {
        //           id: 6,
        //           label: "84343720000220233475",
        //         },
        //         {
        //           id: 7,
        //           label: "84343720000223110534",
        //         },
        //       ],
        //     },
        //     {
        //       id: 8,
        //       label: "86478340000145684366",
        //       children: [
        //         {
        //           id: 11,
        //           label: "84343720000221498701",
        //         },
        //         {
        //           id: 12,
        //           label: "84343720000223023096",
        //         },
        //         {
        //           id: 13,
        //           label: "84343720000219934165",
        //         },
        //         {
        //           id: 14,
        //           label: "84343720000222999711",
        //         },
        //         {
        //           id: 15,
        //           label: "84343720000223412877",
        //         },
        //         {
        //           id: 16,
        //           label: "84343720000219690736",
        //         },
        //         {
        //           id: 17,
        //           label: "86478340000128125013",
        //         },
        //         {
        //           id: 18,
        //           label: "86478340000010779254",
        //         },
        //       ],
        //     },
        //   ],
        // },
      ],
      fatherData: [],
      sonData: [],
      grandsonData: [],
      tableData: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        code: null,
      },
      formRules: {
        code: [{ required: true, message: "请输入追溯码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    // this.getFatherData(this.dataCode);
  },
  methods: {
    getBatchNolist() {
      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          listBatchNo(this.queryParams).then((res) => {
            if (res.data.msgCode[0] == "SUCCESS") {
              this.tableData = res.data.baseInfo;
              this.dataCode = res.data.treeNode[0];
              this.getFatherData(this.dataCode);
              this.loading = false;
            } else {
              this.tableData = [];
              this.dataCode = [];
              this.fatherData = [];
              this.sonData = [];
              this.grandsonData = [];
              this.$modal.msgError(res.data.msgInfo[0]);
              this.loading = false;
            }
          });
        }
      });
    },
    handleQuery() {
      this.getBatchNolist();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.tableData = [];
      this.dataCode = [];
      this.fatherData = [];
      this.sonData = [];
      this.grandsonData = [];
    },
    // 复制
    handleCopy(copyValue) {
      //   navigator.clipboard.writeText(copyValue).then(()=>{
      //     this.$message.success('复制成功');
      //   }).catch(()=>{
      //     this.$message.error('复制失败');
      //   });
      this.$copyText(copyValue).then(() => {
        this.$message.success("复制成功");
      });
    },
    getFatherData(data) {
      // this.fatherData=[];
      data.forEach((item) => {
        this.fatherData = [];
        this.fatherData.push({
          value: item.code,
          clicked: false,
          id: item.code,
        });
        if (item.children) {
          this.getSonData(item.children);
        }
      });
    },
    getSonData(data) {
      this.sonData = [];
      this.grandsonData = [];
      data.forEach((item) => {
        const newItem = {
          value: item.code,
          clicked: false,
          id: item.code,
          children: [],
        };
        if (item.children) {
          item.children.map((item) => {
            newItem.children.push({
              value: item.code,
              clicked: false,
              id: item.code,
            });
          });

          this.getGrandsonData(item.children);
        }
        this.sonData.push(newItem);
      });
    },
    getGrandsonData(data) {
      data.forEach((item) => {
        this.grandsonData.push({
          value: item.code,
          clicked: false,
          id: item.code,
        });
      });
    },
    handlefatherNode(item) {
      if (!item.clicked) {
        this.fatherData.forEach((data) => {
          data.clicked = false;
        });
        item.clicked = true;
      } else {
        item.clicked = false;
      }
    },
    handlesonNode(item) {
      this.sonData.forEach((data) => {
        if (item.id == data.id) {
          this.grandsonData = [];
          // ...用于对象、数组，const arr1=[1,2,3];const arr2=[0,...arr1,4];console.log(arr2);//[0,1,2,3,4]
          this.grandsonData.push(...item.children);
          console.log(this.grandsonData);
        }
      });
      //   items.clicked = !items.clicked;
      if (!item.clicked) {
        this.sonData.forEach((data) => {
          data.clicked = false;
        });
        item.clicked = true;
      } else {
        item.clicked = false;
      }
    },
    handlegrandsonNode(item) {
      //   items.clicked = !items.clicked;
      if (!item.clicked) {
        this.grandsonData.forEach((data) => {
          data.clicked = false;
        });
        item.clicked = true;
      } else {
        item.clicked = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 1080px;
  background: #eceaea;
  padding: 20px;
  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    width: 12px; /* 滚动条宽度 */
  }
  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道背景颜色 */
  }
  // ::-webkit-scrollbar-button:start {
  //   background-color: #ccc;
  // }
  // ::-webkit-scrollbar-button:end {
  //   background-color: #ccc;
  // }
  //   /* 滚动条滑块 */
  //   ::-webkit-scrollbar-thumb {
  //     background: #888; /* 滑块背景颜色 */
  //   }

  //   /* 滚动条按钮 */
  // ::-webkit-scrollbar-button {
  //   display: block; /* 显示按钮 */
  //   background: #555; /* 按钮背景颜色 */
  // }

  //   /* 滚动条按钮悬停 */
  //   ::-webkit-scrollbar-button:hover {
  //     background: #333; /* 悬停背景颜色 */
  //   }

  //   /* 滚动条按钮按下 */
  //   ::-webkit-scrollbar-button:active {
  //     background: #111; /* 按下背景颜色 */
  //   }
  .title {
    height: 30px;
    line-height: 30px;
    background: #dddddd;
    padding: 0 0 0 5px;
  }
  .traceableContent {
    width: 100%;
    height: 400px;
    background: rgb(255, 255, 255);
    margin-top: 30px;
    padding: 10px 20px 20px 20px;
    .info {
      height: 60px;
      line-height: 60px;
      span {
        margin-right: 20px;
      }
    }
    .traceableCode {
      display: flex;
      justify-content: space-between;
      .codeNum {
        font-size: 14px;
      }
      .firstCode {
        width: 30%;
        margin-right: 30px;
        .firstCodeBox {
          width: 100%;
          height: 300px;
          border: 1px solid #6d6b6b;
          overflow-y: scroll;
          display: flex;
          flex-direction: column;
          .firstCodeItem {
            height: 26px;
            line-height: 26px;
            cursor: pointer;
            margin: 0 0 3px 0;
            padding: 0 0 0 5px;
            .copyBox {
              color: #409eff;
              cursor: pointer;
              margin-left: 3px;
              z-index: 999;
            }
          }
        }
      }
      .secondCode {
        width: 30%;
        margin-right: 30px;
        .secondCodeBox {
          width: 100%;
          height: 300px;
          border: 1px solid #6d6b6b;
          overflow-y: scroll;
          display: flex;
          flex-direction: column;
          .secondCodeItem {
            height: 26px;
            line-height: 26px;
            cursor: pointer;
            margin: 0 0 3px 0;
            padding: 0 0 0 5px;
            .copyBox {
              color: #409eff;
              cursor: pointer;
              margin-left: 3px;
              z-index: 999;
            }
          }
        }
      }
      .thirdCode {
        width: 30%;
        .thirdCodeBox {
          width: 100%;
          height: 300px;
          border: 1px solid #6d6b6b;
          overflow-y: scroll;
          display: flex;
          flex-direction: column;
          .thirdCodeItem {
            height: 26px;
            line-height: 26px;
            cursor: pointer;
            margin: 0 0 3px 0;
            padding: 0 0 0 5px;
            .copyBox {
              color: #409eff;
              cursor: pointer;
              margin-left: 3px;
              z-index: 999;
            }
          }
        }
      }
    }
  }
}
</style>